<template>  
    <el-row>  
      <el-col v-for="(item, index) in data" :key="index" :span="8" :offset="index > 0 ? 2 : 0">  
        <el-card :body-style="{ padding: '0px' }">  
          <img :src="item.imageUrl" class="image" /> <!-- 假设每个对象有一个imageUrl属性 -->  
          <div style="padding: 14px">  
            <span>{{ item.title }}</span> <!-- 假设每个对象有一个title属性 -->  
          </div>  
        </el-card>  
      </el-col>  
    </el-row>  
  </template>
  
<script lang="ts" setup>
import { ref } from 'vue'
// import axios from 'axios' // 引入axios库进行HTTP请求  


const data = ref([{
    imageUrl:'http://demo-mp3.oss-cn-shenzhen.aliyuncs.com/egg-edu-demo/5f63baebb94c35eab781.jpg',
    title: '',
}]) // 用于存储后端传回的数据  


// 在组件创建时发起HTTP请求获取数据  
// function async created() {  
//   try {  
//     const response = await axios.get('/api/data') // 替换为你的后端API地址  
//     data.value = response.data // 将获取到的数据赋值给data变量  
//   } catch (error) {  
//     console.error(error)  
//   }  
// }



</script>
  
<style>


.image {
    width: 250px;
    display: block;
}
</style>
  